<template>
  <div class="reg_top" :style="bg">
    <div class="register_logo">
      <img
        src="./images/logo-1.png"
        alt=""
        style="width: 35%; margin-top: 20px; margin-left: 33%"
      />
    </div>
    <section class="registerContainer">
      <div class="registerInner">
        <div class="register_header"></div>
        <div class="register_content">
          <form @submit.prevent="register">
            <section>
              <section class="register_message">
                <label class="register_item" for="name">用户名:</label>
                <input
                  type="tel"
                  id="name"
                  maxlength="11"
                  placeholder="用户名"
                  v-model="username"
                />
              </section>
              <section class="register_verification">
                <label
                  class="register_item"
                  style="margin-right: 17px"
                  for="pwd"
                  >密码:</label
                >
                <input
                  type="text"
                  id="pwd"
                  placeholder="密码"
                  v-if="showpassword"
                  v-model="password"
                />
                <input
                  type="password"
                  placeholder="密码"
                  id="pwd"
                  v-else
                  v-model="password"
                />
                <div
                  class="switch_button off"
                  @click="showpassword = !showpassword"
                >
                  <div
                    class="switch_circle"
                    :class="{ right: showpassword }"
                  ></div>
                </div>
              </section>
              <section class="register_verification">
                <label
                  class="register_item"
                  style="margin-right: 17px"
                  for="repwd"
                  >密码:</label
                >
                <input
                  type="text"
                  placeholder="请再次输入密码"
                  id="repwd"
                  v-if="showpassword1"
                  v-model="password1"
                />
                <input
                  type="password"
                  placeholder="请再次输入密码"
                  id="repwd"
                  v-else
                  v-model="password1"
                />
                <div
                  class="switch_button off"
                  @click="showpassword1 = !showpassword1"
                >
                  <div
                    class="switch_circle"
                    :class="{ right: showpassword1 }"
                  ></div>
                </div>
              </section>
              <section class="register_message">
                <label class="register_item" for="phone">手机号:</label>
                <input
                  type="tel"
                  maxlength="11"
                  id="phone"
                  placeholder="请输入手机号"
                  v-model="email"
                />
                <button
                  :disabled="!rightPhone"
                  class="get_verification"
                  :class="{ right_phone: rightPhone }"
                  @click.prevent="getCode"
                >
                  {{
                    computeTime > 0 ? `已发送(${computeTime}s)` : "获取验证码"
                  }}
                </button>
              </section>
              <section class="register_verification">
                <label class="register_item" for="code">验证码:</label>
                <input
                  type="tel"
                  maxlength="6"
                  id="code"
                  placeholder="验证码"
                  v-model="code"
                />
              </section>
              <section class="register_hint">
                <input
                  type="checkbox"
                  class="register_text"
                  v-model="isAgree"
                />
                <span class="register_txt">
                  温馨提示: 同意并愿意遵守用户协议
                </span>
              </section>
            </section>
            <div class="register_login">
              <button
                class="register_register"
                id="register_register_form"
                :disabled="!isAgree"
              >
                账号注册
              </button>
              <div class="register_goL">
                已有账号？
                <router-link to="/login"> 去登录 </router-link>
              </div>
            </div>
          </form>
        </div>
      </div>
      <AlertTip
        :alertText="alertText"
        v-show="ShowAlert"
        @closeTip="closeTip"
      ></AlertTip>
    </section>
  </div>
</template>
<script>
import { reqRegister, reqSendcode } from "../../api";
import AlertTip from "../../components/AlertTip/AlertTip";
export default {
  data() {
    return {
      showpassword: false, //是否显示密码
      showpassword1: false, //是否显示二次密码
      computeTime: 0, //计时时间
      email: "", //电话号
      password: "", //密码
      password1: "", //第二次密码
      username: "", //用户名
      code: "", //短信验证码
      alertText: "", //提示文本
      ShowAlert: false, //是否显示提示框
      isAgree: false,
      bg: {
        backgroundImage: "url(" + require("./images/bg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
    };
  },
  components: {
    AlertTip,
  },
  computed: {
    rightPhone() {
      return /^1[3456789]\d{9}$/.test(this.email);
    },
  },

  methods: {
    //异步获取短信验证码
    async getCode() {
      // 如果当前没有计时
      if (!this.computeTime) {
        // alert("-----");
        // 启动倒计时
        this.computeTime = 60; //VueComponent
        this.intervalId = setInterval(() => {
          this.computeTime--;
          if (this.computeTime <= 0) {
            clearInterval(this.intervalId);
          }
        }, 1000);
        const result = await reqSendcode(this.email);
        if (result.code1 === 0) {
          console.log(result);
          if (localStorage.getItem("code" != " ")) {
            localStorage.removeItem("code");
            localStorage.setItem("code", result.data);
          } else {
            localStorage.setItem("code", result.data);
          }
          this.showAlert(result.msg);
        }
      }
    },
    showAlert(alertText) {
      this.ShowAlert = true;
      this.alertText = alertText;
    },
    // 异步注册
    async register() {
      let result;
      // 前台表单注册验证
      const { email, code, username, password, password1 } = this;
      if (!this.username) {
        // 请输入用户名
        this.showAlert("请输入用户名");
        return;
      } else if (!this.password) {
        // 请输入密码
        this.showAlert("请输入密码");
        return;
      } else if (this.password.length < 6) {
        // 密码长度
        this.showAlert("密码至少6位");
        return;
      } else if (this.password != this.password1) {
        // 请输入密码
        this.showAlert("两次密码必须一致");
        return;
      } else if (this.email == "" || this.email.length != 11) {
        // 手机号不正确
        this.showAlert("请输入正确的联系方式");
        return;
      } else if (this.code === "") {
        // 验证码必须是6位数字
        this.showAlert("验证码不能为空");
        return;
      } else if (!/^\d{6}$/.test(this.code)) {
        // 验证码必须是6位数字
        this.showAlert("验证码错误");
        return;
      } else if (localStorage.getItem("code") != this.code) {
        // 验证码必须是6位数字
        this.showAlert("验证码错误");
        return;
      }
      // 发送ajax请求用户注册
      result = await reqRegister({
        username,
        password,
        password1,
        email,
        code,
      });
      if (result.code1 == 0) {
        // 去个人中心界面
        this.$router.replace("/login");
      } else {
        // 显示提示
        this.showAlert(result.msg);
      }
    },
    // 关闭警示框
    closeTip() {
      this.ShowAlert = false;
      this.alertText = "";
    },
  },
};
</script>
<style lang="stylus" rel="stylesheeet/stylus">
@import '../../common/stylus/mixins.styl';

.reg_top {
  width:100%;
  height: 100%;
  .register_logo{
    width: 100%;
    height: 100px;
    // background-color #fff
  }
}

.registerContainer {
  width: 100%;
  margin-top:20px;

  .registerInner {
    padding-top: 20px;
    width: 100%;
    margin: 0 auto;

    .register_header {
      .register_logo {
        font-size: 35px;
        font-weight: bold;
        color: black;
        text-align: center;
      }
    }

    .register_content {
      >form {
        &.on {
          display: block;
        }

        input {
          width: 67%;
          height: 100%;
          padding-left: 10px;
          border-radius: 4px;
          outline: none;
          font: 400 14px Arial;
          background-color: transparent;

          &:focus {
            border: 1px solid #02a774;
          }
        }

        .register_message {
          width: 100%;
          position: relative;
          margin-top: 10px;
          height: 48px;
          font-size: 14px;
            .register_item {
              line-height: 48px;
              font-size: 18px;
              float: left;
              color: #282727;
              margin-left 10%
          }
          ::-webkit-input-placeholder {
            /* Webkit browsers */
            color: #675f5f;
            font-size: 14px;
          }

          :-moz-placeholder {
            /* Mozilla Firefox 4 to 8 */
            color: #675f5f;
            font-size: 14px;
          }

          ::moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #675f5f;
            font-size: 14px;
          }

          :-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #675f5f;
            font-size: 14px;
          }


          .get_verification {
            position: absolute;
            top: 50%;
            right: 25px;
            transform: translateY(-50%);
            border: 0 solid transparent;
            color: #090209;
            font-size: 14px;
            background: transparent;
            touch-action: none;

            &.right_phone {
              color: black;
            }
          }
        }

        .register_verification {
          position: relative;
          margin-top: 10px;
          height: 48px;
          font-size: 14px;
            .register_item {
              line-height: 48px;
              font-size: 18px;
              float: left;
              color: #282727;
              margin-left 10%
          }
          ::-webkit-input-placeholder {
            /* Webkit browsers */
            color: #675f5f;
            font-size: 14px;
          }

          :-moz-placeholder {
            /* Mozilla Firefox 4 to 8 */
            color: #675f5f;
            font-size: 14px;
          }

          ::moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #675f5f;
            font-size: 14px;
          }

          :-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #675f5f;
            font-size: 14px;
          }

          .switch_button {
            font-size: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            transition: background-color 0.3s, border-color 0.3s;
            padding: 0 6px;
            width: 30px;
            height: 16px;
            line-height: 16px;
            color: #fff;
            position: absolute;
            top: 50%;
            right: 6%;
            transform: translateY(-50%);
            background-color #eee

            .switch_text {
              float: right;
              color: #ddd;
            }

            &.on {
              background: #02a774;
            }

            >.switch_circle {
              // transform translateX(27px)
              position: absolute;
              top: -1px;
              left: -1px;
              width: 16px;
              height: 16px;
              border: 1px solid #ddd;
              border-radius: 50%;
              background: #fff;
              box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
              transition: transform 0.3s;

              &.right {
                transform: translateX(30px);
              }
            }
          }
        }

        .register_hint {
          position relative
          height 25px
          margin-top: 5px;
          color: #090209;
          font-size: 14px;
          line-height: 20px;
            .register_text{
              position absolute
              width: 5%;
              height:20px
              line-height 15px
              margin-left: 12%;
            }
            .register_txt{
              position absolute
              left 20%
              color #4d4949
            }
            .register_login{
              width: 100%;
              height:50px;
              margin-top 20px

            }

          >a {
            color: #090209;
          }
        }

        .register_register {
          display: inline-block;
          width: 84%;
          height: 40px;
          border-radius: 25px;
          background: #4fa765;
          color: #fff;
          text-align: center;
          font-size: 16px;
          line-height: 42px;
          border: 0;
          margin: 5% 8% 2%;
        }
        .register_goL{
          font-size: 14px;
          margin: 0 32%;
        }
      }

      .about_us {
        display: block;
        font-size: 12px;
        margin-top: 40px;
        text-align: center;
        color: #4d4949;
      }
    }
  }
}
</style>
